<template>
  <div class="cat-container">
    <div class="con-list">
      <ul>
        <!-- <li
          v-for="(e, i) in leftArrary"
          v-bind:key="i"
         
          data-index="`${i}`"
        >
          {{ e }}
        </li> -->
        <li
            @click="sendIndex(0)"
            :class="dataChild == 0 ? 'active' : ''"
            data-index="0"
          >
            品牌好货
          </li>
        <li
            @click="sendIndex(1)"
            :class="dataChild == 1 ? 'active' : ''"
            data-index="1"
          >
            品牌好货
          </li>
          <li
            @click="sendIndex(2)"
            :class="dataChild == 2 ? 'active' : ''"
            data-index="2"
          >
            品牌好货
          </li>
          <li
            @click="sendIndex(3)"
            :class="dataChild == 3 ? 'active' : ''"
            data-index="3"
          >
            品牌好货
          </li>
          <li
            @click="sendIndex(4)"
            :class="dataChild == 4 ? 'active' : ''"
            data-index="4"
          >
            品牌好货
          </li>
          <li
            @click="sendIndex(5)"
            :class="dataChild == 5 ? 'active' : ''"
            data-index="5"
          >
            品牌好货
          </li>
          <li
            @click="sendIndex(6)"
            :class="dataChild == 6 ? 'active' : ''"
            data-index="6"
          >
            品牌好货
          </li>
          <li
            @click="sendIndex(7)"
            :class="dataChild == 7 ? 'active' : ''"
            data-index="7"
          >
            品牌好货
          </li>
          <li
            @click="sendIndex(8)"
            :class="dataChild == 8 ? 'active' : ''"
            data-index="8"
          >
            品牌好货
          </li>
         
          <li>{{dataChild}}</li>
      </ul>
    </div>
    <demo-zi v-on:child-click="myRev" :key="timer"  :send="dataChild"></demo-zi>
  </div>
</template>
<script>
import demoZi from "../components/demo-zi.vue";
export default {
  name: "demoFu",
  data() {
    return {
      // index: 0,
      dataChild: 1, //传给子组件(轮播图)  每次更新页面，数值只会刷新一次，我们需要不断的把值传给父元素，所以需要页面重新加载
      timer: "", //重新加载子组件
      parentNum: "",
      leftArrary: [
        "推荐",
        "标签",
        "台词",
        "话题",
        "专辑",
        "作者",
        "诗词",
        "节气",
        "文案",
      ],
    };
  },
  components: {
    demoZi,
  },
  methods: {
        sendIndex(k) {
         //   赋值
          this.dataChild = k;
         //   重新加载子组件
          this.timer = new Date().getTime();
         console.log(k);
        },
        myRev(msg) {
          this.dataChild = msg;
          console.log('子传父的值===>',msg);
        },
  },

};
</script>


<style lang="scss" scoped>
.cat-container {
  display: flex;
  width: 375px;
  .con-list {
    // 左边导航列表
    position: fixed;
    top: 46px;
    left: 0;
    z-index: 99;
    width: 94px;
    height: 100%;
    background: #f8f8f8;
    ul {
      width: 94px;
      // height: 100%;
      li {
        width: 94px;
        text-align: center;
        height: 42px;
        line-height: 42px;
        font-size: 14px;
        background: #f8f8f8;
      }
      .active {
        background: #fff;
        color: skyblue;
      }
    }
  }
  //   .con-banner {
  //     position: relative;
  //     top: 46px;
  //     left: 94px;
  //     .con-wrapper {
  //       .con-slide {
  //         width: 282px;
  //         min-height: 200px;
  //       }
  //     }
  //   }
}
</style>